<!--
 * @name: index.vue
 * @author: XU>.<CHEN
 * @date: 2022-03-01 22:25
 * @description：index.vue
 * @update: 2022-03-01 22:25
 -->
<template>
  <div class="main_container">
    <div class="box_container" :class="{ 'back_box': activity === 'registry' }">
      <!-- 左侧背面 -->
      <div class="left_container item_box turn_back" :class="{'mask': activity === 'registry', 'unmask': activity === 'login'}">
        <div class="sign_container">
          <div class="title">Welcome To Cheerful Roll</div>
          <el-form
            ref="formQueryRef"
            :model="formQuery"
            style="margin-top: 20px"
            :rules="rules"
            status-icon
            label-position="right"
            label-width="90px"
          >
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="formQuery.userName" placeholder="we are waiting for your..." autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="formQuery.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="再次确认" prop="rePassword">
              <el-input type="password" v-model="formQuery.rePassword" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>

          <div style="width: 80%;">
            <span class="redo" @click="cleanRegisForm">REDO</span>
          </div>

          <div class="btn_group">
            <el-button class="btn_item" :loading="regisLoading" @click="regisDone">注册</el-button>
            <el-button class="btn_item" @click="changeToRegis('login')">返回</el-button>
          </div>

        </div>
      </div>
      <div class="left_container item_box">
        <div class="left_main">
          <div class="title">欢迎登陆 Cheerful Roll</div>
          <div class="input_group">
            <input ref="accountInput" v-model="account" type="text" :class="accountClass" @blur="getBlur(false, 'accountClass')" @focus="getBlur(true, 'accountClass')" placeholder="请在这里输入你的账户名">
            <span ref="accountValidRef" class="error_valid hidden"><span><i></i>你还没有输入账户喔</span></span>
            <input ref="passwordInput" v-model="password" type="password" :class="passwordClass" @blur="getBlur(false, 'passwordClass')" @focus="getBlur(true, 'passwordClass')" placeholder="并且在此输入你的密码">
            <span ref="passwordValidRef" class="error_valid hidden"><span><i></i>不要忘记输入密码喔</span></span>
          </div>
          <div class="cookie_check">
            <el-checkbox>7天免登陆 <span class="tips">不是自己的电脑不要勾选喔</span> </el-checkbox>
            <span class="redo" @click="reset">REDO</span>
          </div>
          <div>
            <el-button class="btn_item" :loading="btnLoading" @click="login">登陆</el-button>
            <el-button class="btn_item" @click="changeToRegis('registry')">注册</el-button>
          </div>
        </div>
      </div>

      <!-- 右侧背面 -->
      <div class="right_container item_box" :class="{'mask': activity === 'login', 'unmask': activity === 'registry'}" style="right: 0;">
        <img src="/src/assets/images/roll_logo.png" alt="">
      </div>
      <div class="right_container item_box turn_back">
        <img src="/src/assets/images/roll_logo.png" alt="注册">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive ,toRefs, onBeforeMount, onMounted, getCurrentInstance, watch, ComponentInternalInstance} from 'vue'
import { useStore } from 'vuex'
import {getToken, setToken} from '@/utils/auth'
import {NodeLogin, Register} from "@/api/modules/loginApi";
import {resetRouter} from "@/router";
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading } from 'element-plus'

/**
 * @description: common
 */
const { proxy } = getCurrentInstance() as any
const store = useStore()
const redirectPath: any = proxy.$route.query.redirect
let activity = ref<string>('login')
function changeToRegis(name: string) {
  activity.value = name
  cleanRegisForm()
}

/**
 * @description: 注册功能
 */
let regisLoading = ref<boolean>(false)
const formQuery = reactive({
  userName: '',
  password: '',
  rePassword: ''
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    if (formQuery.rePassword !== '') {
      proxy.$refs.formQueryRef.validateField('rePassword');
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== formQuery.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
};
const rules = reactive<FormRules>({
  userName: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, validator: validatePass, trigger: 'blur' }],
  rePassword: [{ required: true, validator: validatePass2, trigger: 'blur' }],
})
// 注册确定
function regisDone() {
  proxy.$refs.formQueryRef.validate((valid: boolean) => {
    if (!valid) return false
    const loadingInstance = ElLoading.service({
      text: 'CHEERFUL ROLL LOADING... HOLD ON',
      fullscreen: true
    })
    Register({
      userName: formQuery.userName,
      password: proxy.$md5(formQuery.password)
    }).then(res => {
      console.log(res)
      if (res === 1001) {
        proxy.$message.success('注册成功')
        setTimeout(() => {
          changeToRegis('login')
          loadingInstance.close()
        }, 500)
      } else {
        proxy.$message.warning('注册失败')
        loadingInstance.close()
      }
    }).catch((err) => {
      loadingInstance.close()
    })
  }).catch((err: any) => {})
}
function cleanRegisForm() {
  proxy.$refs.formQueryRef.resetFields()
  formQuery.userName = ''
}

/**
 * @description: 登录功能
 */
let accountClass = ref<string>('input_item')
let passwordClass = ref<string>('input_item')
let account = ref<string>('')
let password = ref<string>('')
let btnLoading = ref<boolean>(false)
// 登录确定
function login() {
  if (account.value && password.value) {
    btnLoading.value = true
    const loadingInstance = ElLoading.service({
      text: 'CHEERFUL ROLL LOADING... HOLD ON',
      fullscreen: true
    })
    NodeLogin({
      userName: account.value,
      password: proxy.$md5(password.value)
    }).then((res: any) => {
      const userInfo = res.userInfo
      const tokenKey: string = res.token
      // 登陆信息存储
      setToken(tokenKey)
      resetRouter()
      // proxy.$message.success('登陆成功!但提醒你个傻逼只能维持24小时喔')
      btnLoading.value = false
      setTimeout(() => {
        redirectPath ? proxy.$router.push({ path: redirectPath }) : proxy.$router.push({ name: 'home' })
        loadingInstance.close()
      }, 500)
      btnLoading.value = false
    }).catch(_ => {
      btnLoading.value = false
      loadingInstance.close()
    })

    // LoginCheerful({
    //   client: 'WEB',
    //   sysCode: 'cheerfulRoll',
    //   loginName: data.account,
    //   password: proxy.$md5(data.password)
    // }).then((res: any) => {
    //   const userInfo = res.userInfo.pmTUser
    //   const tokenKey: string = res.userInfo.userToken
    //
    //   // 登陆信息存储
    //   setToken(tokenKey)
    //   store.commit('setUser', userInfo)
    //   store.commit('setInfo', '测试模块化store')
    //
    //   proxy.$message.success('登陆成功!但提醒你个傻逼只能维持24小时喔')
    //   data.btnLoading = false
    //   setTimeout(() => {
    //     redirectPath ? proxy.$router.push({ path: redirectPath }) : proxy.$router.push({ name: 'home' })
    //   }, 500)
    // }).catch((err: any) => {
    //   data.btnLoading = false
    // })
  } else {
    validate('all')
  }
}
// 校验函数
function validate(item: String) {
  if (item === 'account' || item === 'all') {
    proxy.$refs.accountValidRef.className = account.value ? 'error_valid hidden' : 'error_valid'
    proxy.$refs.accountInput.style.borderColor = account.value ? 'rgba(95, 158, 160, 0.59)' : 'red'
  }
  if (item === 'password' || item === 'all') {
    proxy.$refs.passwordValidRef.className = password.value ? 'error_valid hidden' : 'error_valid'
    proxy.$refs.passwordInput.style.borderColor = password.value ? 'rgba(95, 158, 160, 0.59)' : 'red'
  }
}
// 重置校验
function resetFields(item: String) {
  if (item === 'account' || item === 'all') {
    proxy.$refs.accountValidRef.className = 'error_valid hidden'
    proxy.$refs.accountInput.style.borderColor = 'rgba(95, 158, 160, 0.59)'
  }
  if (item === 'password' || item === 'all') {
    proxy.$refs.passwordValidRef.className = 'error_valid hidden'
    proxy.$refs.passwordInput.style.borderColor = 'rgba(95, 158, 160, 0.59)'
  }
}
// 重置表单
function reset() {
  account.value = ''
  password.value = ''
  resetFields('all')
}
// 输入框获取/失去焦点
function getBlur(boolean: boolean, className: string) {
  eval(className).value = boolean ? 'input_active input_item' : 'input_item'
  if (!boolean) {
    className === 'accountClass' ? validate('account') : validate('password')
  }
}

/**
 * @description: next
 */

</script>
<style lang="scss" scoped>
.el-form {
  width: 90%;
  align-self: flex-start;
}
</style>
<style lang='scss' scoped>
.main_container {
  width: 100%;
  height: 100%;
  background-color: #81c0ff;
  perspective: 1500px;
}
.box_container {
  width: 50%;
  height: 50%;
  min-width: 1040px;
  min-height: 500px;
  max-height: 550px;
  background-color: white;
  border-radius: 10px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 20px 5px #4c6b9a;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(.56,-0.37,.78,1.66) 0ms;
}
.back_box {
  transform: rotateX(180deg) translateY(50%);
}
.item_box {
  float: left;
  width: 50%;
  height: 100%;
}
.left_container {
  border-right: 1px solid black;
  //box-shadow: 5px 0 6px 2px firebrick;
  box-sizing: border-box;
  background-color: white;
  transition: all 0.6s cubic-bezier(.56,-0.37,.78,1.66) 0ms;
  .sign_container {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .button_group {
      width: 100%;
    }
  }
}
.right_container {
  box-sizing: border-box;
  background-color: white !important;
  transition: all 0.6s cubic-bezier(.56,-0.37,.78,1.66) 0ms;
  display: flex;
  align-items: center;
  img {width: 100%;}
}
.turn_back {
  transform: rotateX(180deg);
}
.input_item {
  display: block;
  width: 100%;
  height: 38px;
  //margin: 10px 0;
  font-size: 14px;
  letter-spacing: 0.5px;
  outline: none;
  border: 1px solid rgba(95, 158, 160, 0.59);
  border-radius: 5px;
  padding: 0 14px;
  box-sizing: border-box;
  &::-webkit-input-placeholder {
    font-size: 12px;
    color: rgba(96, 98, 102, 0.62);
  }
}
.input_active {
  box-shadow: 0 0 5px 1px bisque;
}
.left_main {
  margin: 0 auto;
  width: 80%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.input_group {
  margin-top: 20px;
}
.title {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
}
.error_valid {
  display: inline-block;
  box-sizing: border-box;
  height: 23px;
  min-height: 23px;
  line-height: 21px;
  font-size: 13px;
  color: #fb6969;
  //margin-left: 20px;
}
.btn_group {
  margin-top: 10px;
  width: 80%;
}
.btn_item {
  outline: none;
  background-color: white;
  border: 1px solid bisque;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  width: 45%;
  height: 40px;
  &:nth-child(1) {
    background-color: #1686ff;
    color: white;
  }
  &:nth-child(1):hover {
    background-color: rgba(22, 134, 255, 0.8);
  }
  &:nth-child(2) {
    float: right;
  }
  &:nth-child(2):hover {
    background-color: #fb6969;
    color: white;
  }
}
.cookie_check {
  margin-bottom: 20px;
}
.tips {
  display: inline-block;
  padding-left: 10px;
  color: rgba(128, 128, 128, 0.6);
  font-size: 10px;
}
.redo {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  float: right;
  cursor: pointer;
  margin-right: 10px;
  font-size: 12px;
  &:hover {
    color: darkgoldenrod;
  }
}
.hidden {
  opacity: 0;
}
.mask {
  position: absolute;
  z-index: 999;
  //background-color: #ffbd85;
}
.unmask {
  position: absolute;
  z-index: -999;
}
.hub_container {
  width: 95%;
  height: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-size: 80px;
  font-weight: bold;
}
.hub_item {
  margin-top: 2%;
  height: 46%;
  span {
    display: inline-block;
    line-height: 230px;
  }
}
.roll {
  color: black;
  background-color: #fc9900;
  border-radius: 10px;
}
</style>

